html {
    font-size: 100px;
}

.fullpage {
    max-width: 540px;
    margin: 0 auto;
}

.page {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% bottom;
    position: relative;
    background-size: 100% auto;
    background-color: #fff;
}

.p_text {
    position: absolute;
    left: 10%;
    top: 4rem;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 80%;
    height: 7rem;
    opacity: 0;
}

.p1 {
    background-image: url(../images/p1.png);
}

.p2 {
    background-image: url(../images/p2.png);
}

.p3 {
    background-image: url(../images/p3.png);
}

.p4 {
    background-image: url(../images/p4.png);
    background-size: 102% auto;
    margin-left: -0.1%;
}

.p5 {
    background-image: url(../images/p5.png);
}

.p6 {
    background-image: url(../images/p6.gif);
    background-size: 102% auto;
    margin-left: -0.1%;
}

.p7 {
    background-image: url(../images/p7.png);
    background-size: 102% auto;
    margin-left: -0.1%;
}

.p8 {
    background-image: url(../images/p8.png);
    background-size: 102% auto;
    margin-left: -0.1%;
}

.p1_text {
    background-image: url(../images/p1_text_v.png);
    left: auto;
    right: 18%;
    top: 13rem;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 22%;
    height: 70%;
    opacity: 0;
}

.p2_text {
    background-image: url(../images/p2_text.png);
}

.p3_text {
    background-image: url(../images/p3_text.png);
    width: 70%;
    margin-left: 5%;
}

.p4_text {
    background-image: url(../images/p4_text.png);
}

.p5_text {
    background-image: url(../images/p5_text.png);
}

.p6_text {
    background-image: url(../images/p6_text.png);
}

.p7_text {
    background-image: url(../images/p7_text.png);
}

.p8_text {
    background-image: url(../images/p8_text.png);
}

.p1_letter {
    background-image: url(../images/p1_letter1.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 10rem;
    height: 9rem;
    position: absolute;
    right: 15%;
    bottom: 10%;
}

.p2_t {
    background-image: url(../images/p2_t.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 18rem;
    height: 1.5rem;
    position: absolute;
    left: 50%;
    margin-left: -9rem;
    top: 50%;
    margin-top: -10rem;
    overflow: hidden;
}

.p2_in {
    background-image: url(../images/p2_c1.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 12rem;
    height: 5rem;
    position: absolute;
    left: 50%;
    margin-left: -8rem;
    top: 42rem;
    opacity: 0;
}

.p2_link {
    background-image: url(../images/p2_c2.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 7rem;
    height: 7rem;
    position: absolute;
    right: 50%;
    margin-right: -12rem;
    top: 40rem;
    opacity: 0;
}

.p2_link a {
    display: block;
    width: 100%;
    height: 100%;
}

.p3_hand {
    background-image: url(../images/p3_hand.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    width: 100%;
    height: 35rem;
    position: absolute;
    left: 0;
    bottom: 0;
}

.p5_clock {
    position: absolute;
    left: 20%;
    top: 13rem;
    background-image: url(../images/p5_clock_out.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 6rem;
    height: 6rem;
}

.p5_clock_h {
    position: absolute;
    width: 0.2rem;
    height: 1rem;
    background-color: #201f1d;
    left: 50%;
    top: 50%;
    margin-left: -0.1rem;
    margin-top: -1rem;
    animation: move 6s linear infinite;
    transform-origin: center bottom;
}

.p5_clock_m {
    position: absolute;
    width: 0.2rem;
    height: 1.4rem;
    background-color: #201f1d;
    left: 50%;
    top: 50%;
    margin-left: -0.1rem;
    margin-top: -1.4rem;
    animation: move 1s linear infinite;
    transform-origin: center bottom;
}

.p6_jz {
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 2rem;
    height: 2rem;
    position: absolute;
    right: 8rem;
    top: 16.2rem;
    animation: flashing 1s linear infinite;
}

.p8_seagull {
    width: 6rem;
    height: 3rem;
    position: absolute;
}

.p8_seagull_center {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -0.25rem;
    margin-top: -0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #fff;
}

.p8_seagull_left {
    position: absolute;
    right: 51%;
    top: 20%;
    width: 2rem;
    height: 1rem;
    background-image: url(../images/p8_seagull_left.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    transform-origin: 100% 80%;
}

.p8_seagull_right {
    position: absolute;
    left: 51%;
    top: 18%;
    width: 2.4rem;
    height: 1rem;
    background-image: url(../images/p8_seagull_right.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    transform-origin: 0% 70%;
}

.p8_seagull1 {
    left: 20%;
    top: 30%;
    transform: rotate(10deg) scale(0.7);
}

.p8_seagull2 {
    right: 10%;
    top: 25%;
    transform: rotate(10deg) scale(0.5);
}

.p8_seagull3 {
    right: 18%;
    top: 37%;
    transform: rotate(15deg) scale(0.3);
}

.letterZoom {
    animation: letterZoom 2s linear forwards;
}

.lines {
    animation: lines 8s ease-in-out forwards;
}

.delayIn1 {
    animation: delayIn1 1s ease-in-out 7s forwards;
}

.delayIn2 {
    animation: delayIn2 1s ease-in-out 8s forwards;
}

.handZoom {
    animation: handZoom 1s ease-in-out forwards;
}

.zoom {
    animation: zoom 5s linear forwards;
}

.fly1 {
    animation: fly1 1s linear alternate-reverse infinite;
}

.fly2 {
    animation: fly2 1s linear alternate-reverse infinite;
}

.flyZoom1 {
    animation: flyZoom1 5s linear forwards;
}

.flyZoom2 {
    animation: flyZoom2 5s linear forwards;
}

.flyZoom3 {
    animation: flyZoom3 5s linear forwards;
}

.fadeInLeft {
    animation-name: fadeInLeft;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.tada {
    animation-name: tada;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

@keyframes letterZoom {
    0% {
        transform: scale(1) translate(0, 0);
        background-image: url(../images/p1_letter1.png);
    }
    100% {
        transform: scale(2) translate(-30%, -50%);
        background-image: url(../images/p1_letter2.png);
    }
}

@keyframes lines {
    7.14% {
        height: 1.5rem;
    }
    14.2% {
        height: 3rem;
    }
    21.9% {
        height: 4.5rem;
    }
    29.04% {
        height: 6rem;
    }
    36.18% {
        height: 7.5rem;
    }
    43.32% {
        height: 9rem;
    }
    50.46% {
        height: 10.5rem;
    }
    57.6% {
        height: 13rem;
    }
    64.74% {
        height: 14.5rem;
    }
    71.88% {
        height: 16rem;
    }
    79.02% {
        height: 17.5rem;
    }
    86.16% {
        height: 19rem;
    }
    86.16% {
        height: 20.5rem;
    }
    93.3% {
        height: 22rem;
    }
    100% {
        height: 23.5rem;
    }
}

@keyframes delayIn1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes delayIn2 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes handZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}

@keyframes move {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes zoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.5);
    }
}

@keyframes flashing {
    from {
        background-image: url(../images/p6_jz.png);
    }
    to {
        background-image: url(../images/p6_jz2.png);
    }
}

@keyframes fade {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

@keyframes fly1 {
    from {
        transform: rotate(-50deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes fly2 {
    from {
        transform: rotate(50deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes flyZoom1 {
    from {
        transform: scale(0.7);
    }
    to {
        transform: scale(0);
    }
}

@keyframes flyZoom2 {
    from {
        transform: scale(0.5);
    }
    to {
        transform: scale(0);
    }
}

@keyframes flyZoom3 {
    from {
        transform: scale(0.3);
    }
    to {
        transform: scale(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}